.loop_padding(@n) when (@n >=0) {
  .p@{n} {
    padding: @n * 1px;
  }

  .pw@{n} {
    padding-left: @n * 1px;
    padding-right: @n * 1px;
  }

  .ph@{n} {
    padding-top: @n * 1px;
    padding-bottom: @n * 1px;
  }

  .m@{n} {
    margin: @n * 1px;
  }

  .mw@{n} {
    margin-left: @n * 1px;
    margin-right: @n * 1px;
  }

  .mh@{n} {
    margin-top: @n * 1px;
    margin-bottom: @n * 1px;
  }

  //循环调用自身
  .loop_padding((@n - 4));
}

.loop_mrgin(@n) when (@n >=0) {
  .mt@{n} {
    margin-top: @n * 1px;
  }

  .mr@{n} {
    margin-right: @n * 1px;
  }

  .mb@{n} {
    margin-bottom: @n * 1px;
  }

  .ml@{n} {
    margin-left: @n * 1px;
  }

  .pt@{n} {
    padding-top: @n * 1px;
  }

  .pr@{n} {
    padding-right: @n * 1px;
  }

  .pb@{n} {
    padding-bottom: @n * 1px;
  }

  .pl@{n} {
    padding-left: @n * 1px;
  }

  //循环调用自身
  .loop_mrgin((@n - 2));
}

#app {
  .loop_padding(72);
  .loop_mrgin(72);
}

.text_r {
  text-align: right;
}
